import React, { useEffect, useState } from 'react';
import { R, sh, sw } from '../../tools';
import { useNavigation } from '@react-navigation/native';

const size = 96;
const vipSize = 32;

const MyPage = () => {
    const navigation = useNavigation();
    const [vip, isVip] = useState(true);

    return (
        <R.View style={styles.body}>
            <R.View style={styles.userCard}>
                {
                    vip && (
                        <R.View style={{ position: 'absolute', flexDirection: 'row', alignItems: 'center', right: sw * 0.08, top: 6, minWidth: vipSize, height: vipSize, borderRadius: 30, overflow: 'hidden' }}>
                            <R.Image source={require("../../res/imageAssets/vip.png")} style={{ height: vipSize, width: vipSize }} resizeMode={"cover"} />
                            <R.Text style={{ fontSize: 13, color: '#333', marginStart: 3 }}>{"剩余 " + 15 + " 天"}</R.Text>
                        </R.View>
                    )
                }
                <R.View style={styles.avatarWrapper}>
                    <R.Image source={require("../../res/imageAssets/avatar.png")} style={{ height: size, width: size }} resizeMode={"cover"} />
                </R.View>
                <R.Text style={styles.userAcc}>15367823463</R.Text>
                <R.View style={styles.coinWrapper}>
                    <R.View style={{ alignItems: 'center' }}>
                        <R.View style={{ height: 50, width: 50, paddingTop: 3 }}>
                            <R.Image source={require("../../res/imageAssets/diamond.png")} style={{ height: 42, width: 50 }} resizeMode={"contain"} />
                        </R.View>
                        <R.Text style={styles.text}>{120}</R.Text>
                    </R.View>
                    <R.View style={{ alignItems: 'center' }}>
                        <R.Image source={require("../../res/imageAssets/exp.png")} style={{ height: 50, width: 50 }} resizeMode={"contain"} />
                        <R.Text style={styles.text}>120</R.Text>
                    </R.View>
                </R.View>
            </R.View>

            <R.View style={styles.settingCard}>
                <R.TouchableOpacity onPress={() => {}}>
                    <R.Text style={styles.settingItem}>修改资料</R.Text>
                </R.TouchableOpacity>
                
                <R.View style={styles.divider} />
                <R.TouchableOpacity>
                    <R.Text style={styles.settingItem}>账号充值</R.Text>
                </R.TouchableOpacity>

                <R.View style={styles.divider} />
                <R.TouchableOpacity>
                    <R.Text style={styles.settingItem}>账号安全</R.Text>
                </R.TouchableOpacity>

                <R.View style={styles.divider} />
                <R.TouchableOpacity>
                    <R.View style={{ height: 48, flexDirection: 'row' ,alignItems:'center'}}>
                        <R.Text style={{
                            marginStart: 30,
                            fontSize: 16,
                            color: '#555',
                        }}>热门活动</R.Text>
                        <R.Image source={require("../../res/imageAssets/tag.png")} style={{ height: 26, width: 28,marginStart:6 }} resizeMode={"contain"} />
                    </R.View>
                </R.TouchableOpacity>

                <R.View style={styles.divider} />
                <R.TouchableOpacity>
                <R.Text style={styles.settingItem}>退出登录</R.Text>
                </R.TouchableOpacity>
            </R.View>

        </R.View>
    )
};

export default MyPage;

const styles = R.StyleSheet.create({
    body: {
        height: sh,
        width: sw,
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        backgroundColor: '#f5f5f5'
    },
    userCard: {
        width: sw * 0.99,
        height: 200,
        borderRadius: 30,
        backgroundColor: '#fff',
        elevation: 2,
        marginTop: sh * 0.1,
    },
    avatarWrapper: {
        alignSelf: 'center',
        height: size,
        width: size,
        marginTop: -size / 2,
        borderRadius: size / 2,
        overflow: 'hidden',
        elevation: 4.2
    },
    userAcc: {
        fontSize: 18,
        color: 'gray',
        fontWeight: 'bold',
        alignSelf: 'center',
        marginTop: 16
    },
    coinWrapper: {
        flexDirection: 'row',
        width: sw,
        justifyContent: 'space-around',
        alignItems: 'center',
        marginTop: 17
    },
    text: {
        fontSize: 18,
        color: '#666',
    },
    settingCard: {
        minHeight: 200,
        width: sw * 0.99,
        borderRadius: 30,
        backgroundColor: '#fff',
        elevation: 2,
        marginTop: 27
    },
    settingItem: {
        height: 46,
        marginStart: 30,
        fontSize: 16,
        color: '#555',
        textAlignVertical: 'center'
    },
    divider: {
        width: sw * 0.88,
        alignSelf: 'center',
        height: 1,
        backgroundColor: '#ccc'
    }
})